<script setup lang="ts">
import MyButton from './MyButton.vue';

import { ref } from 'vue';
import { message } from '@/components/XtxUI';
import Couter from './couter.vue';
import CouterVueUse from './CouterVueUse.vue';

const count = ref(10);

const isAgree = ref(false);

const showMsg = () => {
  // type   提示类型颜色
  // text   提示文字
  // time   提示持续时间
  // message({ type: 'success', text: '成功提示' });
  // message({ type: 'error', text: '失败提示' });
  message({ text: '警告提示' });
};
</script>

<template>
  <!-- Vue3原生版倒计时 -->
  <Couter />
  <!-- VueUse版倒计时 -->
  <CouterVueUse />

  <MyButton type="primary" size="middle">我的按钮</MyButton>
  <MyButton>我的按钮</MyButton>

  <h1>父组件:{{ count }}</h1>

  <!-- 测试复选框组件 -->
  <h2>测试复选框组件和message消息提示</h2>
  <h3>isAgree：{{ isAgree }}</h3>
  <XtxCheckBox v-model="isAgree">是否同意协议</XtxCheckBox>
  <MyButton @click="showMsg">点击弹出消息</MyButton>
</template>

<style scoped></style>
